<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">个人信息</span></el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="24">
        <el-card
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            width: 100%;"
          shadow="hover">
          <div class="profile-pre-wrapper" v-show="wrapperVisible">
            <div style="float: left">
              <template v-if=" studentInfo.photo== null  || studentInfo.photo == ''">
                <el-image
                  style="width: 120px; height: 120px"
                  src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F"
                  fit="fit">
                </el-image>
              </template>
              <template v-else>
                <el-image
                  style="width: 120px; height: 120px"
                  :src="studentInfo.photo"
                  fit="fit">
                </el-image>
              </template>
            </div>

            <div style="float: left">
              <div class="profile-pre-name clearfix">
                <span title="王乃醒">{{studentInfo.name}}</span>
                <!--学生姓名span-->

                <!--学生标签-->
                <span class=" profile-pre-name_jobDentity">学生</span>
                <!--学生标签-->

              </div>
              <!--学生姓名-->

              <!--个人信息容器-->
              <div class="profile-pre-info">
                <!--个人信息文本-->
                <span class="profile-pre-info-txt">
                       <el-tag size="small" v-if="studentInfo.sex === 1" type="success">男</el-tag>
                       <el-tag size="small" v-else-if="studentInfo.sex === 0" type="success">女</el-tag>
                    </span>
                <span class="profile-pre-info-txt">24岁</span>
                <span class="profile-pre-info-txt">{{studentInfo.education}}</span>
                <span class="profile-pre-info-txt">{{studentInfo.graduateDate}}毕业</span>
                <!--个人信息文本-->
              </div>
              <p class="profile-pre-contact clearfix">
                <i class="el-icon-mobile-phone"></i>
                <span class="fl profile-pre-contact-phoneT">{{studentInfo.phone}}</span>
              </p>
              <span class="profile-pre-edit" @click="changeDisplay"><i class="el-icon-edit"></i>编辑</span>
            </div>
          </div>
          <div class="profile-pre-wrapper"  v-show="wrapperVisible4Edit" >
            <div style="width: 600px;float: left">
              <el-divider><i class="el-icon-mobile-phone"></i>个人信息</el-divider>
              <el-descriptions title="【学生基础信息】" style="color: indianred;" direction="vertical" :column="5" border>
                <el-descriptions-item label="学生姓名">{{studentInfo.name}}</el-descriptions-item>
                <el-descriptions-item label="学生学号">{{studentInfo.account}}</el-descriptions-item>
                <el-descriptions-item label="学生生日">{{studentInfo.birthday}}</el-descriptions-item>
                <el-descriptions-item label="学生专业">{{studentInfo.profession}}</el-descriptions-item>
                <el-descriptions-item label="学生院校">{{studentInfo.college}}</el-descriptions-item>
                <el-descriptions-item label="受教育程度">{{studentInfo.education}}</el-descriptions-item>
                <el-descriptions-item label="电话">{{studentInfo.phone}}</el-descriptions-item>
                <el-descriptions-item label="性别">
                  <el-tag size="small" v-if="studentInfo.sex === 1" type="success">男</el-tag>
                  <el-tag size="small" v-else-if="studentInfo.sex === 2" type="success">女</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="毕业时间">{{studentInfo.graduateDate}}</el-descriptions-item>
              </el-descriptions>
              <el-divider></el-divider>
              <el-descriptions title="【学生扩展信息】" style="color:indianred;" direction="vertical" :column="1" border>
                <el-descriptions-item label="一寸照">
                  <template v-if="studentInfo.photo == null || studentInfo.photo == ''">
                    <el-image
                      style="width: 100px; height: 100px"
                      src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F"
                      fit="fit">
                    </el-image>
                  </template>
                  <template v-else>
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="studentInfo.photo"
                      fit="fit">
                    </el-image>
                  </template>

                </el-descriptions-item>
                <el-descriptions-item label="学生性格">{{studentInfo.description}}</el-descriptions-item>
                <el-descriptions-item label="政治面貌">{{studentInfo.political}}</el-descriptions-item>
              </el-descriptions>
            </div>

            <div style="width: 600px;margin-left: 160px; float: left">
              <el-divider><i class="el-icon-mobile-phone"></i>学生信息修改</el-divider>
              <el-result icon="warning" title="填写提示" subTitle="请根据要求正确进行操作">

              </el-result>


              <el-form :model="formData" :rules="rule" ref="dataAddForm">
                <el-form-item label="一寸证件照" prop="photo" label-width="100px">
                  <el-upload
                    action=""
                    class="avatar-uploader"
                    :http-request="handleHttpRequest"
                    :show-file-list="false"
                    :before-upload="beforeTitleImageUpload">
                    <img v-if="titleImg"  style="width: 100%;height: 300px;" :src="titleImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-alert
                    show-icon
                    title="上传自己个人一寸照哦！在简历上大家才更了解你呢！"
                    type="info"
                    style="line-height: 6px;">
                  </el-alert>
                </el-form-item>


                <el-form-item label="政治面貌" prop="political" label-width="100px">
                  <el-select v-model="formData.political" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-alert
                    show-icon
                    title="请正确选择政治面貌！"
                    type="info"
                    style=" margin-top:10px;line-height: 6px;">
                  </el-alert>
                </el-form-item>

                <el-form-item label="手机号" prop="phone" label-width="100px">
                  <el-input v-model="formData.phone" ></el-input>
                  <el-alert
                    show-icon
                    title="认真核实手机号码是否正确哦！招聘通过公司根据手机号码告知哦！"
                    type="info"
                    style=" margin-top:10px;line-height: 6px;">
                  </el-alert>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" label-width="100px">
                  <el-input v-model="formData.email" autocomplete="off" ></el-input>
                  <el-alert
                    show-icon
                    title="认真核实邮箱是否正确哦！招聘通过公司根据手邮箱告知哦！"
                    type="info"
                    style=" margin-top:10px;line-height: 6px;">
                  </el-alert>
                </el-form-item>



                <el-form-item label="性格特征"  prop="description" label-width="100px">
                  <el-input type="textarea" v-model="formData.description" autocomplete="off"></el-input>
                  <el-alert
                    show-icon
                    title="更了解自己的人，更加容易获得工作！"
                    type="info"
                    style=" margin-top:10px;line-height: 6px;">
                  </el-alert>
                </el-form-item>

                <el-form-item style="text-align: center">
                  <el-button type="success" icon="el-icon-check" circle @click="changeStudentInfo('dataAddForm')">提交</el-button>
                  &nbsp; &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp;
                  <el-button type="warning" icon="el-icon-refresh-right" circle @click="clearInput">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <!--编辑按钮-->
            <div style="float: left">
              <span class="profile-pre-edit" @click="changeDisplay"><i class="el-icon-d-arrow-left"></i>返回</span>
            </div>
            <!--编辑按钮-->
            <!--个人信息编辑容器 -->

          </div>

        </el-card>


      </el-col>
    </el-row>
    <!--个人信息展示  -->




  </div>
</template>

<script>

import {getStudentInfo,changeStudentInfo,uploadStudentImage}  from "@/api/student";

export default {
  name: "index",
  data() {
    return {
      studentInfo:{},//学生信息
      formData: {
        phone:"",
        email:"",
        description: ""
      },//表单数据
      wrapperVisible:true, //展示展示框状态
      wrapperVisible4Edit:false, //编辑展示框状态
      titleImg:"",//个人照
      options: [
        {value: '中共党员（含预备党员）', label: '中共党员（含预备党员）'},
        {value: '民主党派', label: '民主党派'},
        {value: '无党派人士', label: '无党派人士'},
        {value: '团员', label: '团员'},
        {value: '群众', label: '群众'}
      ],//选项卡设置
      rule: {//表单的校验规则
        political: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
        description: [{required: true, message: '请输入性格特点', trigger: 'blur'}],
        phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
        photo: [{required: true, message: '请上传个人一寸照', trigger: 'blur'}],
        email: [{required: true, message: '请输入个人邮箱', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getStudentInfo()
  },
  methods: {

    //获取学生信息
    getStudentInfo(){
      console.log("====系统正在获取学生信息====")
      getStudentInfo().then(res=>{
        this.studentInfo = res.data
        this.formData = JSON.parse(JSON.stringify(this.studentInfo))
      })
      console.log("====系统获取学生信息成功!====")

    },
    //完善学生信息的方法
    changeStudentInfo(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【===========系统正在进行完善学生信息....==========】")
        if (valid) {
          //发送请求
          changeStudentInfo(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
            })
            this.getStudentInfo();
            console.info("【========系统成功完善学生信息....==========】")

          });
        }
      });
    },
    //清空完善学生信息的表单
    clearInput(){
      this.formData = {}
      this.titleImg = ""
    },
    //切换展示框的展示
    changeDisplay(){
      const  statusTemp = this.wrapperVisible
      this.wrapperVisible = this.wrapperVisible4Edit
      this.wrapperVisible4Edit = statusTemp
    },
    //上传咨询配图之前的处理方法
    beforeTitleImageUpload(file) {
      //保证图片大小小于为2M
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    //处理自定义的图片上传
    handleHttpRequest(params) {
      let formData = new FormData();
      //上传的图片文件和后端接收的图片文件一致
      formData.append('uploadImage', params.file);
      //图片名称
      formData.append('FileName', params.file.name);

      // 将图片上传到服务器.
      uploadStudentImage(formData).then(res=>{
        this.formData.photo = res.data
        //得到后端返回的图片URL，赋值给titleImg完成图片回显
        this.titleImg = res.data
        this.$message({
          showClose: true,
          message: '恭喜你，一寸照上传成功！',
          type: 'success',
        })
      })
    },

  }

}
</script>
<style scoped>

/*个人信息包裹容器*/
.profile-pre-wrapper {
  position: relative;
  color: #333;
  padding-bottom: 20px;
}
/*个人信息包裹容器*/

/*学生姓名*/
.profile-pre-name {
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 32px;
  margin-top: 5px;
  padding-left: 25px;
}
/*学生姓名*/

/*学生标签*/
.profile-pre-name_jobDentity {
  margin-top: 3px;
  margin-left: 13px;
  padding: 0 5px;
  border: 1px solid #2888f3;
  border-radius: 1px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #2888f3;
  letter-spacing: 0;
  line-height: 20px;
}
/*学生标签*/

/*格式清除*/
.clearfix {
  zoom: 1;
  display: block;
}

/*个人信息容器*/
.profile-pre-info {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 14px;
}
/*个人信息容器*/

/*个人信息文本*/
.profile-pre-info-txt {
  position: relative;
  padding: 0 24px;
}
/*个人信息文本*/

/*联系电话*/
.profile-pre-contact {
  margin-left: 20px;
  font-size: 16px;
  letter-spacing: .97px;
  line-height: 14px;
}
/*联系电话*/

/*编辑按钮*/
.profile-pre-edit {
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1.21px;
  position: absolute;
  top: 0;
  right: 0;
}
/*编辑按钮*/

/*咨询配图相关样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/*咨询配图相关样式*/

</style>
